<template>
  <Breadcrumb />
  <el-card class="box-card">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="expand">
      <!-- 下拉列表菜单 -->
      <template #default="props">
        <el-row 
          style="display:flex"
          :class="['bdbottom',index === 0 ? 'bdtop' : '', 'vcenter']"
          v-for="(item,index) in props.row.children"
          :key="item.id"
        >
          <el-col :span="5">
            <el-tag class="mx-1" size="large" closable>{{item.authName}}</el-tag>
          </el-col>
          <!-- 二级菜单 -->
            <el-col :span="19" >
              <el-row
                :class="[index2 === 0 ? '' : 'bdtop', 'vcenter']"
                v-for="(ite,index2) in item.children"
                :key="ite.id"
              >
                <el-col :span="5">
                  <el-tag class="mx-1" size="large" closable type="success">{{ite.authName}}</el-tag>
                </el-col>
                <!-- 三级菜单 -->
                  <el-col :span="19">
                    <el-tag class="mx-1" size="large" closable type="warning"  v-for="it in ite.children" :key="it.id">
                      {{it.authName}}
                    </el-tag>
                  </el-col>
              </el-row>
            </el-col>
        </el-row>
      </template>
    </el-table-column>
      <el-table-column type="index" label="" width="50" />
      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleDesc" label="角色描述" />
      <el-table-column prop="" label="操作" width="400">
        <template #default="scope">
          <el-button type="primary" :icon="Edit">编辑</el-button>
          <el-button type="danger" :icon="Delete">删除</el-button>
          <el-button type="success" :icon="Setting" @click="handleChange(scope.row)">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 分配权限对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="分配权限"
    width="50%"
  >
    <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    default-expand-all
    :current-node-key="dataValue"
  />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getRoles, allocation } from '@/api/roles'
import { Edit, Delete, Setting } from '@element-plus/icons-vue'
import Breadcrumb from '@/components/Breadcrumb.vue'

// 表格数据
const tableData = ref([])
// 表格子数据
const childData = ref([])
const dataList = async () => {
  const res = await getRoles()
  // console.log(res.data.data)
  tableData.value = res.data.data
  childData.value = res.data.data
  console.log(childData.value)
}
dataList()

// 分配权限点击事件
const dialogVisible = ref(false) // 对话框隐藏
const defaultProps = {
  children: 'children',
  label: 'authName',
}
const data = ref([])
const dataValue = ref() // 默认选中的数据
const handleChange = async (row) => {
  const res = await allocation()
  dialogVisible.value = true
  data.value = res.data.data
  dataValue.value = row.label
  // console.log(data.value)
}

</script>

<style scoped>
.el-card{
  margin-top: 15px;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
.bdtop{
  border-top: 1px solid #eee;
}
.el-tag{
  margin: 7px;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>